---
# Front matter comment to ensure Jekyll properly reads file.
---


// Teaser -----------------------------

html {
  height: 100%;
  background: hsl(230, 16%, 20%);
}

body {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teaser {
  flex: 1;
  max-width: 900px;
  backface-visibility: hidden;
  animation: teaser-animation-intro 1s forwards;
}
@keyframes teaser-animation-intro {
    0% { opacity: 0; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}



// Electron Icon

$teaser-duration: 4s;
$teaser-delay: $teaser-duration / 3;
$teaser-delay-diff: .1s;


.teaser-path {
  fill: hsl(190, 88%, 80%);
  opacity: .1;
  transform-origin: 50% 50%;
  transition: transform .4s cubic-bezier(.50, .20, .20, 1);
}

@for $i from 1 through 3 {
  .teaser-path.long-#{$i}  { transition-delay: $teaser-delay-diff * $i; }
  .teaser-path.dot-#{$i}   { transition-delay: $teaser-delay-diff * 0; }
  .teaser-path.loop-#{$i}  { transition-delay: $teaser-delay-diff * $i; }
  .teaser-path.short-#{$i} { transition-delay: $teaser-delay-diff * $i; }
}

// Initial position
.teaser-path.dot     { transform: translate(35px, -37px); }
.teaser-path.short-1 { transform: translate(119px, 37px) rotate(-134deg); }
.teaser-path.short-2 { transform: translate(-20px, 61px) rotate(106deg); }
.teaser-path.short-3 { transform: translate(65px, -18px) rotate(-17deg); }
.teaser-path.long-1  { transform: translate(-101px, -45px) rotate(-107deg); }
.teaser-path.long-2  { transform: translate(-35px, 8px) rotate(133deg); }
.teaser-path.long-3  { transform: translate(-64px, 20px) rotate(13deg); }
.teaser-path.loop-1  { transform: translate(-51px, -128px); }
.teaser-path.loop-2  { transform: translate(166px, -88px); }
.teaser-path.loop-3  { transform: translate(79px, 21px); }

@for $i from 1 through 3 {
  .teaser-path.long-#{$i}  { animation: teaser-animation $teaser-duration $teaser-delay * $i + $teaser-delay-diff * 1 infinite; }
  .teaser-path.dot-#{$i}   { animation: teaser-animation $teaser-duration $teaser-delay * $i + $teaser-delay-diff * 2 infinite; }
  .teaser-path.loop-#{$i}  { animation: teaser-animation $teaser-duration $teaser-delay * $i + $teaser-delay-diff * 3 infinite; }
}
@keyframes teaser-animation {
   0% { opacity: .1; }
   2% { opacity: 1; }
   8% { opacity: 1; }
   50% { opacity: .1; }
}

// On hover
.teaser:hover {
  .teaser-path {
    transform: none;
  }
}
@for $i from 1 through 3 {
  .teaser:hover .teaser-path.dot-#{$i}   { animation: teaser-animation-active $teaser-duration $teaser-delay * $i - $teaser-delay infinite; }
  .teaser:hover .teaser-path.short-#{$i} { animation: teaser-animation-active $teaser-duration $teaser-delay * $i + $teaser-delay-diff * 1 infinite; }
  .teaser:hover .teaser-path.long-#{$i}  { animation: teaser-animation-active $teaser-duration $teaser-delay * $i + $teaser-delay-diff * 2 infinite; }
  .teaser:hover .teaser-path.loop-#{$i}  { animation: teaser-animation-active $teaser-duration $teaser-delay * $i + $teaser-delay-diff * 3 infinite; }
}
@keyframes teaser-animation-active {
   0% { opacity: .1; }
   2% { opacity: 1; }
   8% { opacity: 1; }
   50% { opacity: .1; }
}


// Hack for Firefox --------------------------
// Adjust initial position
// It might be related to: https://bugzilla.mozilla.org/show_bug.cgi?id=923193

@-moz-document url-prefix() {
  .teaser-path.short-1 { transform: translate(26px, -78px) rotate(-134deg); }
  .teaser-path.short-2 { transform: translate(40px, -42px) rotate(106deg); }
  .teaser-path.short-3 { transform: translate(40px, -32px) rotate(-17deg); }
  .teaser-path.long-1  { transform: translate(-124px, 4px) rotate(-107deg); }
  .teaser-path.long-2  { transform: translate(-92px, 22px) rotate(133deg); }
  .teaser-path.long-3  { transform: translate(-56px, 8px) rotate(13deg); }
}
